[자바스크립트] 원하는 길이의 특정 문자를 텍스트 앞 또는 뒤에 추가하기, padStart, padEnd

자바스크립트에서 텍스트 앞 또는 뒤에 특정 문자를 원하는 길이만큼 필요한 경우가 있습니다. 예를 들어 아래와 같이 반복되는 숫자 또는 날짜에서 0을 추가하기 위한 경우도 대표적인 예시가 되겠죠.

* 숫자 앞에 00 추가하기
image-001.jpg, image-002.jpg, image-003.jpg ...

* 날짜 월 일 앞에 0 추가하기
(X) 2024-1-1
(O) 2024-01-01

* 파일이 어떤 것인지 나타내기 위해서 텍스트를 추가할 경우
Before) test.jpg
After) icon-test.jpg 또는 test-button.jpg

이처럼 자바스크립트에서 텍스트 앞 또는 뒤에 특정 문자열을 원하는 길이만큼 추가하기 위해서 어떻게 할 수 있을까요? 가장 간단한 방법으로 padStart() 그리고 padEnd()를 사용하는 것이 가능하죠. 아래에서 자세히 알아봅니다.

padStart, padEnd 문자열 내장함수 알아보기

오늘 알아볼 String 타입의 내장함수 padStart()와 padEnd()는 ES2017에서 도입된 문자열 메서드로 각각 다음의 기능을 수행합니다.

padStart // 원본 문자열의 시작 부분에 다른 문자열을 채우기
padEnd // 원본 문자열 뒤에 다른 문자열 채우기

위 두 가지 메서드를 각각 알아보겠습니다. 제일 먼저 padStart() 부터 알아보겠습니다.

! padStart() 사용 방법 및 예제

padStart() 메서드는 두 개의 매개변수를 받으며 기본적인 문법은 아래와 같습니다.

String.padStart(목표 길이, 채울 문자)

• 목표 길이 : 빈 공간에 해당하는 목표 길이
• 채울 문자 : 빈 공간에 채울 문자 Ex) '0', '_'

매개변수는 목표 길이와 채울 문자열이 사용되며 아래에서 간단한 예제를 만들어보겠습니다.

@ 날짜 앞에 '0' 채우기

@ 빈 공간 ' ' 추가하기
만약 동일한 자리 수를 맞추기 위해서 빈 여백을 넣는 것도 가능합니다.

모두 길이가 동일한 문자열을 반환하게 됩니다. 다음으로 padEnd()를 알아봅니다.

padEnd() 사용 방법 및 예제

텍스트 뒤에 특정 문자를 추가하는 방법으로 padEnd() 메서드를 사용할 수 있습니다. 이 메서드는 padStart()와 유사하지만, 문자열의 끝에 문자를 추가하는 차이점을 가집니다. 아래는 문법입니다.

String.padEnd(목표 길이, 채울 문자)

• 목표 길이 : 빈 공간에 해당하는 목표 길이
• 채울 문자 : 빈 공간에 채울 문자
  

그럼 padEnd()를 사용한 간단한 예제를 만들어봅니다. 아래 변수 hiddenNames는 각각의 이름 정보를 숨기기 위해 앞의 2자리만 남겼다고 가정합니다. 이제 나머지를 x로 표기하되 8자리를 가져야한다면? 매우 간단하게 padEnd()를 사용하여 아래 방법으로 코드 작성이 가능하죠.

@ 비식별화를 위한 xxx 추가하기

이와 같이 매우 간단하게 비식별 문자열로 변환하는 것이 가능합니다.

[참고] lodash 라이브러리 사용하기

lodash 라이브러리 역시 비슷한 역할을 수행하는 padStart()와 padEnd()가 존재합니다. 이를 사용할 경우 비슷하지만 더 복잡한 문자열 처리 요구에 좀 더 유용할 수 있습니다. 그러나 일반적인 사용에는 자바스크립트의 내장 메서드인 padStart와 padEnd가 충분하며, 추가적인 라이브러리를 사용하는 것은 보통 더 복잡한 작업이나 특별한 요구 사항이 있을 때 고려됩니다.

여기까지 문자열에 사용하는 padStart(), padEnd()에 대하여 알아보았습니다.